<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="settingsBox">
        <label>
            <input type="checkbox" id="stream">流
            <dfn>
                结果逐行传送到步进函数。与会使浏览器崩溃的大输入一起使用。
            </dfn>
        </label>
        <label>
            <input type="checkbox" id="worker">工作线程
            <dfn>
                使用单独的线程，因此网页不会锁定。
            </dfn>
        </label>
        <label>
            <input type="checkbox" id="header">标题行
            <dfn>
                按字段名称而不是数组键数据。
            </dfn>
        </label>
        <label>
            <input type="checkbox" id="dynamicTyping">动态打字
            <dfn>
                将数字数据转换为数字，将真/假转换为布尔值。
            </dfn>
        </label>
        <label>
            <input type="checkbox" id="skipEmptyLines">跳过空行
            <dfn>
                默认情况下，解析空行；检查跳过。
            </dfn>
        </label>
        <hr />
        <label>
            分隔符：<input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter">
            <dfn>定界符。通常是逗号或制表符。默认为逗号。</dfn>
        </label>
        <label>
            预览：<input type="number" min="0" max="1000" placeholder="0" id="preview">
            <dfn>如果 &gt; 0，则在这么多行后停止解析。</dfn>
        </label>
        <label>
            编码：<input type="text" id="encoding" placeholder="default" size="7">
            <dfn>仅适用于读取本地文件。默认值由浏览器指定（通常为 UTF-8）。</dfn>
        </label>
        <label>
            评论字符：<input type="text" size="7" maxlength="10" placeholder="default" id="comments">
            <dfn>如果指定，则跳过以此字符串开头的行。</dfn>
        </label>
    </div>

    <div>
        <div class="grid-66 pull-33">
            <div class="input-area" id="input-string" style="display: block;">
                <textarea id="input" placeholder="String input"></textarea>
            </div>
            <div class="input-area" id="input-local" style="display: none;">
                
                <div class="text-center">
                    Choose one or more delimited text files for Papa to parse.
                </div>

                <input type="file" id="files" multiple="">
                
                Sample files:
            </div>
            <div class="input-area" id="input-remote" style="display: none;">
                
                <div class="text-center">
                    Type the URL of the file to be downloaded and parsed.
                    <br>
                    <small>(cross-origin requests require Access-Control-Allow-Origin header)</small>
                </div>

                <input type="text" id="url" placeholder="URL">

                Sample files:

                <ul>
                    <li>
                        <a href="javascript:" id="remote-normal-file">Normal file</a>
                    </li>
                    <li>
                        <a href="javascript:" id="remote-large-file">Large file</a>
                    </li>
                    <li>
                        <a href="javascript:" id="remote-malformed-file">Malformed file</a>
                    </li>
                </ul>
            </div>
            <div class="input-area" id="input-unparse" style="display: none;">
                <textarea id="json" placeholder="JSON string"></textarea>
            </div>
            <div class="text-center">
                <div class="see-results">
                    
                </div>
                <button id="submit" class="green">解析</button>
            </div>
        </div>
    </div>
    <style>
        .settingsBox {
            display: flex;
            flex-direction: column;
        }

        dfn {
            font-size: 9px;
        }
    </style>
</body>

</html>